<template>
    <header>
        <i class="iconfont icon-leftarrow" @click="gotoMy"></i>
        <h1>设置</h1>
    </header>
    <main>
        <ul>
            <li>
                个人资料
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>
                关于小鹏
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>
                版本更新
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>
                账户安全
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>
                第三方平台认证
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>
                消息推送
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>
                内容推荐
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>
                清除缓存
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>
                上传日志
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>
                隐私政策
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>
                个人信息收集清单
                <i class="iconfont icon-rightarrow"></i>
            </li>
            <li>

                第三方共享信息清单
                <i class="iconfont icon-rightarrow"></i>
            </li>
        </ul>
    </main>
    <footer>
        <span @click="goToLogin">退出登录</span>
    </footer>

</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";

const router = useRouter()
const gotoMy = () => {
    router.push('/my')
}
const goToLogin = () => {
    router.push('/login')
}

</script>

<style lang="scss" scoped>
header {
  position: relative;

  .iconfont {
    font-size: 30px;
    margin-left: 10px;
  }

  h1 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    font-size: 15px;
  }
}

main {
  .iconfont {
    font-size: 17px;
  }

  ul {
    li {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      margin-left: 30px;
      font-size: 15px;

      .iconfont {
        margin-right: 20px;
      }
    }
  }
}

footer {
    margin-top: 15px;
  position: relative;
   //border:1px solid red ;
    width: 100%;
    height: 50px;
  span {
      color: red;
      position: absolute;
      font-size: 15px;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
  }
}
</style>